<template>
	<view class="buy-member">
		<!-- VIP年卡 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">{{ member.name }}</text>
			</view>
		</u-navbar>
		<view
			class="authentication-container w-750 b-box po-re"
			style="background-color: #F2F3F7;padding-top: 2rpx;"
			:style="{ height: containerHeight }"
		>
			<view
				class="w-750 b-box d-flex flex-r ali-i-c just-sw bg-ff"
				style="height: 112rpx;padding: 0 40rpx 0rpx 36rpx;margin-bottom: 20rpx;"
			>
				<text class="pf-sc fw-400 " style="font-size: 30rpx;color: rgba(0,0,0,0.9000);">价格</text>
				<text class="pf-sc fw-400 " style="font-size: 30rpx;color: #555555;">
					{{ member.money }}元
				</text>
			</view>
			<!--  -->
			<view
				class="d-flex flex-c ali-i-c just-c w-750 b-box bg-ff"
				style="margin-bottom: 60rpx;padding-bottom: 50rpx;"
			>
				<view
					class="w-100 b-box d-flex flex-r ali-i-c just-c bg-ff"
					style="height: 112rpx;margin-top: 2rpx;padding: 0 40rpx 0rpx 36rpx;"
				>
					<text
						class="pf-sc fw-500 "
						style="font-size: 30rpx;font-weight: bold; color: rgba(0,0,0,0.9000);"
					>
						{{ member.name }}权益详情
					</text>
				</view>
				<view
					class="w-100 b-box bg-ff"
					style="height: 112rpx;margin-top: 2rpx;border-top: 1rpx solid #F6F6F6;margin: 0 auto;text-align: center;"
				>
					<view
						style="display: flex;justify-content: space-between;width: 650rpx;margin: 0 auto;color: #333;"
					>
						<text>上门洗车</text>
						<text>{{((member.bili)/10).toFixed(1)}}折（终身）</text>
					</view>
					<view
						style="display: flex;justify-content: space-between;width: 650rpx;margin: 0 auto;padding-top: 50rpx;color: #333;"
					>
						<text>汽车用品</text>
						<text>{{((member.bili)/10).toFixed(1)}}折（终身）</text>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="w-750 b-box d-flex flex-r ali-i-c just-c">
				<u-button
					:throttleTime="700"
					@click="BuyMember"
					:customStyle="{
						height: '88rpx',
						width: '670rpx',
						font: '500 32rpx PingFang SC',
						color: '#ffffff',
						borderWidth: '0rpx',
						background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
						borderRadius: '100rpx'
					}"
					shape="square"
					text="购买"
				></u-button>
			</view>
		</view>

		<!-- popup -->
		<u-popup
			:show="show"
			mode="bottom"
			overlayOpacity="0.6"
			:round="25"
			@close="close"
			@open="open"
		>
			<view class=" d-flex flex-c ali-i-s just-s b-box" style="padding: 40rpx 0;">
				<!-- title -->
				<view class="d-flex flex-r ali-i-c just-c w-100 b-box po-re">
					<text class="fw-500 pf-sc fw-500" style="font-size: 32rpx;">选择支付方式</text>
					<text
						class="fw-500 pf-sc fw-500 po-ab"
						style="font-size: 32rpx; right:42rpx"
						@click="close"
					>
						×
					</text>
				</view>

				<view
					class=" d-flex flex-r ali-i-c just-sw w-100 b-box"
					@click="Select = 2"
					style="height: 120rpx;border-bottom: 2rpx solid #dedede;padding: 0 36rpx 0 32rpx;"
				>
					<view class="d-flex flex-r ali-i-c just-s">
						<image
							:src="require('../static/hy2.png')"
							style="width: 56rpx;height: 56rpx;margin-right: 16rpx;"
						></image>
						<text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">余额支付</text>
						<text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">（￥{{ user.money }}）</text>
					</view>
					<view v-if="Select === 2">
						<image :src="require('../static/xz.png')" style="width: 36rpx;height: 36rpx;"></image>
					</view>
				</view>
				<view
					class=" d-flex flex-r ali-i-c just-sw w-100 b-box"
					@click="Select = 1"
					style="height: 120rpx;border-bottom: 2rpx solid #dedede;margin-bottom: 60rpx;padding: 0 36rpx 0 32rpx;"
				>
					<view class="d-flex flex-r ali-i-c just-s">
						<image
							:src="require('../static/hy3.png')"
							style="width: 56rpx;height: 56rpx;margin-right: 16rpx;"
						></image>
						<text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">微信支付</text>
						<!-- <text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">（2次可用）</text> -->
					</view>
					<view v-if="Select === 1">
						<image :src="require('../static/xz.png')" style="width: 36rpx;height: 36rpx;"></image>
					</view>
				</view>

				<!-- btn -->

				<view class="d-flex flex-r ali-i-c just-c w-100 b-box" style="margin-bottom: 12rpx;">
					<u-button
						@click="towxpay"
						:customStyle="{
							height: '88rpx',
							width: '670rpx',
							font: '500 32rpx PingFang SC',
							color: '#ffffff',
							borderWidth: '0rpx',
							background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="确定"
					></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { buyvip, shenqing } from '@/common/api.js';
import { vipdetail, myvip } from '@/common/api.js';
import uNavbar from '../components/uview-ui/components/u-navbar/u-navbar';
import Ubutton from '../components/uview-ui/components/u-button/u-button';
import { _containerHeight, _addUnit, _rpxTpx } from '@/utils/GetSys.js';
import uPopup from '../components/uview-ui/components/u-popup/u-popup';
import { reduce } from 'lodash';
export default {
	components: {
		'u-navbar': uNavbar,
		'u-button': Ubutton,
		'u-popup': uPopup
	},
	data() {
		return {
			show: false,
			containerHeight: '',
			id: null, //会员的id
			usermoney: uni.getStorageSync('userInfo').money, //当前用户的余额
			money: '',
			member: '',
			Select: '',
			user: uni.getStorageSync('userInfo'),
			level: uni.getStorageSync('userInfo').level,
			statusVip: ''
		};
	},
	methods: {
		getMyvip() {
			let params = {
				token: uni.getStorageSync('usertoken')
			};
			myvip(params).then(res => {
				this.level = res.data.data.level;
				uni.setStorageSync('level', res.data.data.level);
			});
		},

		// 查看有没有申请军属卡
		getStatusVip() {
			let params = {
				token: uni.getStorageSync('usertoken'),
				type: 1
			};
			shenqing(params).then(res => {
				this.statusVip = res.data.data;
				console.log(this.statusVip, '申请状态码');
			});
		},

		towxpay() {
			let params = {
				token: uni.getStorageSync('usertoken'),
				id: this.member.id,
				paytype: this.Select
			};
			if (params.paytype != 1 && params.paytype != 2) {
				return uni.showToast({
					title: '请选择支付方式',
					icon: 'none'
				});
			}
			if (this.user.level) {
				uni.showToast({
					title: '您已经购买过会员卡了',
					icon: 'none'
				});
				return;
			}
			buyvip(params).then(res => {
				console.log(res);
				// 判断余额够不够  支付方式为2 的话
				if (params.paytype == 2) {
					if (this.usermoney < this.member.money) {
						uni.showToast({
							title: '余额不足请先充值',
							icon: 'none'
						});
						return;
					}
				}
				if (res.data.code === 1) {
					if (this.Select == 2) {
						uni.showToast({
							title: '购买成功',
							icon: 'success'
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/UserCenter/UserCenter'
							});
						}, 1000);
					} else {
						var paydata = res.data.data;
						uni.requestPayment({
							provider: 'wxpay',
							// "orderInfo": {  },
							// "appid":paydata.appId,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
							nonceStr: paydata.nonceStr, // 随机字符串
							package: paydata.package, // 固定值
							partnerid: '1629006880', // 微信支付商户号
							prepayid: this.member.id, // 统一下单订单号
							timeStamp: paydata.timeStamp, // 时间戳（单位：秒）
							paySign: paydata.paySign, // 签名，这里用的 MD5/RSA 签名
							signType: paydata.signType, // 签名算法
							success(res) {
								uni.switchTab({
									url: '/pages/UserCenter/UserCenter'
								});
							},
							fail(e) {
								uni.showToast({
									title: e,
									icon: 'none'
								});
							}
						});
					}
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
					if (res.data.msg == '请先去验证身份') {
						this.show = false;
						uni.showModal({
							title: '',
							content: '购买军人军属卡需先验证您的身份，通过审核即可购买享受专属折扣',
							confirmText: '立即验证',
							confirmColor: '#26387C',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/userModelA/userA/Authentication/Authentication'
									});
								}
							}
						});
					}
				}
			});
		},

		//弹框
		showPopup() {
			this.show = true;
		},
		close() {
			this.show = false;
		},
		open() {},
		//弹框
		BuyMember() {
			if (!this.statusVip) {
				uni.showModal({
					title: '',
					content: '购买军人军属卡需先验证您的身份，通过审核即可购买享受专属折扣',
					confirmText: '立即验证',
					confirmColor: '#26387C',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/userModelA/userA/Authentication/Authentication'
							});
						}
					}
				});
				return;
			}
			if (this.statusVip.status == 0) {
				uni.showModal({
					title: '',
					content: '您的身份信息正在审核中，请耐心等待一下哦~',
					confirmText: '我知道了',
					confirmColor: '#26387C',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							uni.switchTab({
								url: '/pages/UserHomePage/UserHomePage'
							});
						}
					}
				});
				return;
			}
			if (this.statusVip.status== 1) {
				this.show = true;
			}
			if (this.statusVip.status== 2) {
				uni.showModal({
					title: '',
					content: '您的申请被驳回,驳回原因：'+this.statusVip.reason,
					confirmText: '重新申请',
					confirmColor: '#26387C',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/userModelA/userA/Authentication/Authentication'
							});
						}
					}
				});
			}
		},
		getMember() {
			let params = {
				token: uni.getStorageSync('usertoken'),
				id: parseInt(this.id)
			};
			vipdetail(params).then(res => {
				console.log(res);
				this.member = res.data.data;
				uni.setStorageSync('bili', (res.data.data.bili)/100);
			});
		}
	},
	onShow() {
		this.getStatusVip();
	},
	onLoad(options) {
		this.id = options.id;
		this.getMember(); //购买会员卡
		//this.getmycoupon(); //获取用户的优惠券id
		this.getMyvip();
	}
};
</script>

<style lang="scss">
.buy-member {
}
</style>
